<template>
	<view class="container">
		<view class="header">
			<u-icon name="arrow-leftward" size="20" @click="goBack"></u-icon>
			<!-- <u-button type="primary" icon="arrow-leftward" style="width:10px" plain="true" hairline="false"></u-button> -->
			<!-- <button @click="goBack" class="back-button">返回</button> -->
			<text class="title"> {{ category.name }}</text>
			<!-- <button @click="openSettings" class="settings-button">设置</button> -->
			<u-icon name="plus" size="20" @click="addNewItem"></u-icon>
		</view>
		<view class="content">
			<view class="category-list">
				<view v-for="(category, index) in subcategories" :key="index"
					:class="['category-item', { active: selectedCategory === index }]" @click="selectCategory(index)">
					{{ category.name }}
				</view>
			</view>
			<view class="clothes-list">
				<view v-for="(item, index) in clothes" :key="index" class="clothes-item" @click="clickCloth(item)">

					<u--image :showLoading="true" :src="item.main_image" class="clothes-image" width="80px"
						height="80px" mode="aspectFit" style="align-items: center;"></u--image>
					<!-- <u--image :src="item.image" width="80px" height="80px"/> -->
					<text class="clothes-name">{{ item.name }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import clothes from '@/api/clothes.js'
	export default {
		data() {
			return {
				category: {},
				subcategories: [],
				selectedCategory: 0,
				clothes: []
			};
		},
		onLoad: function(data) {
			this.category.id = data.category_id
			this.loadData();
		},
		onShow: function() {
			this.loadData();
		},
		methods: {
			loadData() {
				clothes.common.get_object('categories', this.category.id).then(res => {
					// console.log(res);
					this.category.name = res.name;
				})

				clothes.common.get_objects('subcategories').then(res => {
					// console.log(res);
					let arr = []
					res.forEach((item) => {
						if (item.parent == this.category.id) {
							arr.push(item)
						}
					})
					this.subcategories = arr;
					if (this.subcategories.length > 0) {
						this.selectCategory(0)
					}
				})
			},
			goBack() {
				// 返回逻辑
				uni.navigateBack({
					delta: 1
				});
			},
			openSettings() {
				// 打开设置逻辑
			},
			selectCategory(index) {
				this.selectedCategory = index;

				let data = {
					'subcategory_id': this.subcategories[index].id
				}

				clothes.get_clothes_by_subcat(data).then((res) => {
					// console.log(res);
					let arr = []
					res.forEach((item) => {
						if (item.main_image) {
							item.main_image = this.$getBaseUrl() + item.main_image
						}
						else {
							item.main_image = '@/static/logo.png'
						}
						arr.push(item)
					})
					this.clothes = res;
				})
				// 根据选中的分类更新衣服列表逻辑
			},
			clickCloth(cloth) {
				uni.navigateTo({
					url: `./editclothes?cloth_id=${cloth.id}`
				});
			},
			addNewItem() {
				// console.log('添加新项目');
				uni.navigateTo({
					url: `./editclothes`,
				});
			},
		}
	}
</script>

<style>
	.container {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		height: 100%;
	}

	.header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 10px;
		background-color: #f8f8f8;
	}
	
	.title {
		font-size: 18px;
		font-weight: bold;
	}

	.back-button,
	.settings-button {
		background: none;
		border: none;
		font-size: 16px;
	}

	.content {
		display: flex;
		flex: 1;
	}

	.category-list {
		width: 25%;
		border-right: 1px solid #ddd;
	}

	.category-item {
		padding: 10px;
		cursor: pointer;
	}

	.category-item.active {
		background-color: #f0f0f0;
	}

	.clothes-list {
		flex: 1;
		display: flex;
		flex-wrap: wrap;
		padding: 10px;
		align-content: flex-start;
	}

	.clothes-item {
		width: 48%;
		margin: 1%;
		text-align: center;
	}

	.clothes-image {
		width: 100%;
		height: auto;
		text-align: center;
	}

	.clothes-name {
		margin-top: 5px;
	}
</style>